<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>求和结果:{{sum}}{{all}}</h1>

    </div>
    <script src="./vue.js"></script>
    <script>
        let app=new Vue({
            el:"#app",
            data:{
                num1:6,
                num2:8,
                all:undefined
            },
            // 计算属性
            // 每一个计算属性里面都有两个方法：get方法和set方法
            // 1.get方法：默认就是使用get方法，只能读取，不能修改
            // 2.set方法：可以修改值
            computed:{
                // （1）简写计算属性，默认使用get方法：
                // sum(){
                //     return this.num1+this.num2;
                // }


                // （2）计算属性完整写法
                sum:{
                    // 只读
                    get(){
                        console.log("计算属性的get方法");
                        return this.num1+this.num2;
                    },
                    // 设置
                    set(newValue){
                        // newValue:形参，表示新赋值的内容
                        console.log("计算属性的set方法");
                        console.log(newValue);
                        this.all=newValue
                        
                    }
                }
            }
        })
        console.log(app);
    </script>
</body>
</html>